/*
 * @Author: xiaosihan 
 * @Date: 2021-04-24 22:37:03 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2021-11-07 02:04:24
 */

import ReactMixinComponent from "@ReactMixinComponent";
import React from "react";
import * as THREE from "three";
import { Text2D, Text3D } from "xsh-react-three";
import MyController from "../MyController/MyController";
import Taideng from "../Taideng/Taideng";


interface Props { }

interface State { }

export default class TextDemo extends ReactMixinComponent<Props, State> {
    constructor(props: Props) {
        super(props);
    }

    render() {
        return (
            <>

                {/* 控制器和相机 */}
                <MyController />

                {/* 台灯模型 */}
                <Taideng />

                <Text2D
                    size={2}
                    curveSegments={4}
                    text={`<Text2D/>\n<Text2D/>`}
                    fontFamily="simhei"
                    textAlign="center_center"
                    position={{ x: 0, y: 15, z: -3 }}
                    rotation={{ x: 0, y: 0, z: 0 }}
                    scale={{ x: 1, y: 1, z: 1 }}
                    material="MeshPhongMaterial"
                    color="#1890ff"
                    castShadow={true}
                />

                <Text3D
                    fontFamily="simhei"
                    text="<Text3D/>"
                    size={2}
                    side={THREE.DoubleSide}
                    curveSegments={4}
                    textAlign="center_center"
                    height={0.4} // 文字的厚度
                    bevelThickness={0.01} // 斜角厚度
                    bevelSize={0.01} // 斜角大小
                    bevelOffset={0}// 斜角偏移
                    bevelSegments={1}//斜角分段

                    position={{ x: 0, y: 0, z: 3 }}
                    rotation={{ x: 0, y: 0, z: 0 }}
                    scale={{ x: 1, y: 1, z: 1 }}
                    material="MeshPhongMaterial"
                    color="#FFD700"
                    castShadow={true}
                />

                <Text3D
                    fontFamily="simhei"
                    text="<Text3D/>"
                    size={2}
                    side={THREE.DoubleSide}
                    curveSegments={4}
                    textAlign="center_center"
                    height={0.2} // 文字的厚度
                    bevelThickness={0.01} // 斜角厚度
                    bevelSize={0.01} // 斜角大小
                    bevelOffset={0.05}// 斜角偏移
                    bevelSegments={1}//斜角分段
                    position={{ x: 0, y: 0, z: 3 }}
                    rotation={{ x: 0, y: 0, z: 0 }}
                    scale={{ x: 1, y: 1, z: 1 }}
                    material="MeshPhongMaterial"
                    color="#1890ff"
                    castShadow={true}
                />

            </>
        )
    }
}